<!-- 报警配置变更记录 -->

<template>
  <div class="flex flex-col w-full p-10px box-border" style="height: calc(100% - 40px)">
    <!-- card -->
    <div
      class="flex-1 flex flex-col h-100%"
      style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
    >
      <div class="h-50px lh-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">报警配置变更列表</span>
      </div>
      <div class="w-full" style="height: calc(100% - 50px)">
        <!--查询表单 -->
        <el-form
          :inline="true"
          :model="formInline"
          class="m-20px pl-30px pr-30px border-0 border-b border-solid border-#E0E0E0"
        >
          <el-form-item label="告警代码">
            <el-select v-model="formInline.region" placeholder="请选择告警类型">
              <el-option label="1" value="一级" />
              <el-option label="2" value="二级" />
            </el-select>
          </el-form-item>
          <el-form-item label="选择变更时间">
            <el-date-picker
              v-model="formInline.region"
              type="daterange"
              range-separator="至"
              unlink-panels
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>

          <div class="mt-2px float-right">
            <el-button class="w-80px text-[#fff] bg-[#0099ff] rounded-15px">查询</el-button>
            <el-button class="w-80px bg-[#dceeff] rounded-15px">重置</el-button>
          </div>
        </el-form>

        <!--表格 -->
        <Table
          class="mt-20px"
          style="height: calc(100% - 170px)"
          :table-columns="tableColumns"
          :table-data="tableData"
        >
          <template #actionColumn="{ row }">
            <div class="flex justify-center">
              <el-button link type="primary" @click="dialogShow = true">查看</el-button>
              <el-button link type="primary">审核记录</el-button>
            </div>
          </template>
        </Table>

        <el-pagination
          class="justify-end m-10px mt-15px"
          layout="total, sizes, prev, pager, next"
          :total="tableData.length"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>

  <Dialog :visible="dialogShow" title="报警配置变更详情" width="1000px" @close="dialogShow = false">
    <el-form
      v-for="(formItem, formIndex) in bjpzbgFormList"
      :key="formIndex"
      :label-width="formItem.formLabelWidth"
    >
      <el-row :gutter="0">
        <el-col v-for="(item, index) in formItem.formList" :key="index" :span="item.span || 12">
          <el-form-item :label="item.label">
            <el-input v-model="item.value" :type="item.type" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <hr />
    <Table
      style="height: 400px; margin: 0; margin-left: 20px"
      :table-columns="bjpzbgTableColumns"
      :table-data="bjpzbgTableData"
    >
    </Table>
  </Dialog>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'

const formInline = reactive({
  user: '',
  region: '',
})
// 定义列配置
const tableColumns = [
  {
    prop: 'id',
    label: '序号',
    width: 80,
  },
  {
    prop: 'gjdm',
    label: '告警代码',
  },
  {
    prop: 'xtwh',
    label: '系统号位',
  },
  {
    prop: 'dwmc',
    label: '点位名称',
    width: 250,
  },
  {
    prop: 'bgnr',
    label: '变更内容',
    width: 280,
  },
  {
    prop: 'bgr',
    label: '变更人',
    width: 140,
  },
  {
    prop: 'lxdh',
    label: '联系电话',
  },
  {
    prop: 'bgsj',
    label: '变更时间',
  },
  {
    prop: 'zt',
    label: '状态',
    width: 100,
  },
  {
    prop: 'actions',
    label: '操作',
    width: '140',
    slotName: 'actionColumn',
    type: 'slot',
    align: 'center',
  },
]

const tableData = [
  {
    id: 1,
    gjdm: 'G0789',
    xtwh: 'DW-1001',
    dwmc: '盛虹炼化-1#变电-功率',
    bgnr: '等级变更: 无 阈值变更: 10%->8%',
    bgr: '李雷',
    lxdh: '18565659898',
    bgsj: '2023/2/10 18:55',
    zt: '已变更',
  },
  {
    id: 2,
    gjdm: 'G0789',
    xtwh: 'DW-1001',
    dwmc: '盛虹炼化-1#变电-功率',
    bgnr: '等级变更: 无 阈值变更: 10%->8%',
    bgr: '李雷',
    lxdh: '18565659898',
    bgsj: '2023/2/10 18:55',
    zt: '已变更',
  },
  {
    id: 3,
    gjdm: 'G0789',
    xtwh: 'DW-1001',
    dwmc: '盛虹炼化-1#变电-功率',
    bgnr: '等级变更: 无 阈值变更: 10%->8%',
    bgr: '李雷',
    lxdh: '18565659898',
    bgsj: '2023/2/10 18:55',
    zt: '已变更',
  },
  {
    id: 4,
    gjdm: 'G0789',
    xtwh: 'DW-1001',
    dwmc: '盛虹炼化-1#变电-功率',
    bgnr: '等级变更: 无 阈值变更: 10%->8%',
    bgr: '李雷',
    lxdh: '18565659898',
    bgsj: '2023/2/10 18:55',
    zt: '已变更',
  },
  {
    id: 5,
    gjdm: 'G0789',
    xtwh: 'DW-1001',
    dwmc: '盛虹炼化-1#变电-功率',
    bgnr: '等级变更: 无 阈值变更: 10%->8%',
    bgr: '李雷',
    lxdh: '18565659898',
    bgsj: '2023/2/10 18:55',
    zt: '已变更',
  },
  {
    id: 6,
    gjdm: 'G0789',
    xtwh: 'DW-1001',
    dwmc: '盛虹炼化-1#变电-功率',
    bgnr: '等级变更: 无 阈值变更: 10%->8%',
    bgr: '李雷',
    lxdh: '18565659898',
    bgsj: '2023/2/10 18:55',
    zt: '已变更',
  },
  {
    id: 7,
    gjdm: 'G0789',
    xtwh: 'DW-1001',
    dwmc: '盛虹炼化-1#变电-功率',
    bgnr: '等级变更: 无 阈值变更: 10%->8%',
    bgr: '李雷',
    lxdh: '18565659898',
    bgsj: '2023/2/10 18:55',
    zt: '已变更',
  },
  {
    id: 8,
    gjdm: 'G0789',
    xtwh: 'DW-1001',
    dwmc: '盛虹炼化-1#变电-功率',
    bgnr: '等级变更: 无 阈值变更: 10%->8%',
    bgr: '李雷',
    lxdh: '18565659898',
    bgsj: '2023/2/10 18:55',
    zt: '已变更',
  },
  {
    id: 9,
    gjdm: 'G0789',
    xtwh: 'DW-1001',
    dwmc: '盛虹炼化-1#变电-功率',
    bgnr: '等级变更: 无 阈值变更: 10%->8%',
    bgr: '李雷',
    lxdh: '18565659898',
    bgsj: '2023/2/10 18:55',
    zt: '已变更',
  },
  {
    id: 10,
    gjdm: 'G0789',
    xtwh: 'DW-1001',
    dwmc: '盛虹炼化-1#变电-功率',
    bgnr: '等级变更: 无 阈值变更: 10%->8%',
    bgr: '李雷',
    lxdh: '18565659898',
    bgsj: '2023/2/10 18:55',
    zt: '已变更',
  },
  {
    id: 11,
    gjdm: 'G0789',
    xtwh: 'DW-1001',
    dwmc: '盛虹炼化-1#变电-功率',
    bgnr: '等级变更: 无 阈值变更: 10%->8%',
    bgr: '李雷',
    lxdh: '18565659898',
    bgsj: '2023/2/10 18:55',
    zt: '已变更',
  },
  {
    id: 12,
    gjdm: 'G0789',
    xtwh: 'DW-1001',
    dwmc: '盛虹炼化-1#变电-功率',
    bgnr: '等级变更: 无 阈值变更: 10%->8%',
    bgr: '李雷',
    lxdh: '18565659898',
    bgsj: '2023/2/10 18:55',
    zt: '已变更',
  },
  {
    id: 13,
    gjdm: 'G0789',
    xtwh: 'DW-1001',
    dwmc: '盛虹炼化-1#变电-功率',
    bgnr: '等级变更: 无 阈值变更: 10%->8%',
    bgr: '李雷',
    lxdh: '18565659898',
    bgsj: '2023/2/10 18:55',
    zt: '已变更',
  },
  {
    id: 14,
    gjdm: 'G0789',
    xtwh: 'DW-1001',
    dwmc: '盛虹炼化-1#变电-功率',
    bgnr: '等级变更: 无 阈值变更: 10%->8%',
    bgr: '李雷',
    lxdh: '18565659898',
    bgsj: '2023/2/10 18:55',
    zt: '已变更',
  },
  {
    id: 15,
    gjdm: 'G0789',
    xtwh: 'DW-1001',
    dwmc: '盛虹炼化-1#变电-功率',
    bgnr: '等级变更: 无 阈值变更: 10%->8%',
    bgr: '李雷',
    lxdh: '18565659898',
    bgsj: '2023/2/10 18:55',
    zt: '已变更',
  },
]

//报警配置变更详情
const dialogShow = ref(false)

const bjpzbgFormList = [
  {
    formLabelWidth: '160px',
    formList: [
      {
        label: '点位编号',
        type: 'input',
        value: 'DW_1001',
      },
      {
        label: '告警代码',
        type: 'input',
        value: 'GT0789',
      },
      {
        label: '点位名称',
        type: 'input',
        value: '盛虹炼化-1#变电-功率',
      },
      {
        label: '告警类型',
        type: 'input',
        value: '蒸汽告警',
      },
      {
        label: '告警等级',
        type: 'input',
        value: '二级告警',
      },
      {
        label: '所属企业部门',
        type: 'input',
        value: '虹洋热电',
      },
    ],
  },
]

const bjpzbgTableColumns = [
  {
    prop: 'id',
    label: '序号',
    width: '80',
  },
  {
    prop: 'bgsj',
    label: '变更时间',
    width: 140,
  },
  {
    prop: 'gjdj',
    label: '告警等级',
  },
  {
    prop: 'djbg',
    label: '等级变更',
    width: 140,
  },
  {
    prop: 'bgnr',
    label: '变更内容',
    width: 200,
  },
  {
    prop: 'bgr',
    label: '变更人',
  },
  {
    prop: 'bgyy',
    label: '变更原因',
  },
  {
    prop: 'fj',
    label: '附件',
  },
]

const bjpzbgTableData = [
  {
    id: 1,
    bgsj: '2023/2/10 18:55',
    gjdj: '二级告警',
    djbg: '无->二级告警',
    bgnr: '下限阈值变更：10%->8%',
    bgr: '李雷',
    bgyy: '无',
    fj: '无',
  },
  {
    id: 2,
    bgsj: '2023/2/10 18:55',
    gjdj: '二级告警',
    djbg: '无->二级告警',
    bgnr: '下限阈值变更：10%->8%',
    bgr: '李雷',
    bgyy: '无',
    fj: '无',
  },
  {
    id: 3,
    bgsj: '2023/2/10 18:55',
    gjdj: '二级告警',
    djbg: '无->二级告警',
    bgnr: '下限阈值变更：10%->8%',
    bgr: '李雷',
    bgyy: '无',
    fj: '无',
  },
  {
    id: 4,
    bgsj: '2023/2/10 18:55',
    gjdj: '二级告警',
    djbg: '无->二级告警',
    bgnr: '下限阈值变更：10%->8%',
    bgr: '李雷',
    bgyy: '无',
    fj: '无',
  },
  {
    id: 5,
    bgsj: '2023/2/10 18:55',
    gjdj: '二级告警',
    djbg: '无->二级告警',
    bgnr: '下限阈值变更：10%->8%',
    bgr: '李雷',
    bgyy: '无',
    fj: '无',
  },
]
</script>

<style>
hr {
  margin-bottom: 18px;
  border: 0;
  border-bottom: 1px solid #ededed;
}
</style>
